@mainColor: #2196f3;
.flexCenterHeight {
  display: flex;
  height: 100%;
  align-items: center;
}

.nativeHeaderWrap {
  .flexCenterHeight;
  height: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  z-index: 15;
  background-color: #f5f6f7;
  .nativeModuleLogo {
    width: 238px;
    padding-left: 12px;
    box-sizing: initial;
    .flexCenterHeight;
    .homepageIcon {
      &:hover .item {
        background-color: #2196f3;
      }
      .item {
        transition: background-color 0.25s;
        background-color: rgba(0, 0, 0, 0.6);
      }
    }
    .nativeCoordinationIcon {
      margin: 0 10px 0 20px;
    }
    .nativeTitle {
      font-size: 16px;
      color: #000;
    }
  }
  .nativeTabsWrap {
    .flexCenterHeight;
    flex: 1;
    li {
      box-sizing: border-box;
      height: 100%;
      line-height: 50px;
      padding: 0 20px;
      transition: all 0.25s;
      cursor: pointer;
      color: #757575;
      font-weight: bold;
      &.tab-item:hover {
        background-color: rgba(0, 0, 0, 0.03);
      }
      &.tab-item.active {
        color: #333;
        font-weight: bold;
        background-color: fadeout(@mainColor, 85%);
      }
    }
  }
}
